<template>
  <div class="wrapper">
    <!-- Header with Back Button and Title -->
    <header class="header">
      <i class="fa fa-arrow-left back-button" @click="goBack"></i>
      <h2>评价列表</h2>
    </header>
    <div v-if="reviews.length === 0" class="no-reviews">
      <p>您还没有评价过任何订单。</p>
    </div>
    <div v-else>
      <div class="review-card" v-for="(review, index) in reviews" :key="index">
        <div class="food-info">
          <img :src="review.foodImg" alt="食物图片" class="food-image" />
          <div class="food-details">
            <div class="food-name-rating">
              <h3 class="food-name">{{ review.foodName }}</h3>
            

              <div class="rating">
                <span class="stars">{{ '★'.repeat(review.rating) }}</span>
                <span class="rating-text">{{ review.rating }}分</span>
              </div>
            </div>
            <p class="review-text">{{ review.comment }}</p>
            <p class="review-date">{{ review.reviewDate }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      reviews: []
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    fetchReviews(userId) {
      this.$http
        .get(`/review/listReviewsByUserId`, { params: { userId } })
        .then(response => {
          console.log("Response data:", response.data); // 添加此行
          if (response.data.flag) {
            // 检查 flag 是否为 true
            this.reviews = response.data.object; // 更新评价列表
          } else {
            console.error(response.data.message);
          }
        })
        .catch(error => {
          console.error("Error fetching reviews:", error);
        });
    }
  },
  mounted() {
    const user = JSON.parse(sessionStorage.getItem("user"));
    if (user && user.username) {
      this.fetchReviews(user.userId);
    }
  }
};
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 3.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}
.back-button {
  position: fixed;
  top: 5vw; /* 根据需要调整高度 */
  left: 4vw; /* 给左边留出一定间距 */
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #ffffff;
  font-size: 4vw;
  z-index: 1000;
}

.no-reviews {
  margin-top: 80vw;
  text-align: center;
  color: #999;
}

.review-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 16px;
  margin-bottom: 8px; /* 调整评价卡片之间的间距 */
}

.review-card:first-child {
  margin-top: 12vw; /* 保持第一个评价与标题的距离一致 */
}

.food-info {
  display: flex;
  align-items: center;
}

.food-image {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  margin-right: 12px;
}

.food-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column; /* 垂直排列 */
}

.food-name-rating {
  display: flex; /* 使 food-name 和 rating 在同一行 */
  justify-content: space-between; /* 在行内分配空间 */
  align-items: center; /* 垂直居中对齐 */
}

.food-name {
  font-size: 16px; /* 增加字体大小 */
  font-weight: bold;
  color: #333; /* 改变字体颜色 */
}

.rating {
  display: flex;
  align-items: center;
}

.stars {
  color: #ffcc00;
  font-size: 18px; /* 增加星星的大小 */
}

.rating-text {
  margin-left: 10px; /* 增加左边距 */
  font-size: 16px;
  color: #666; /* 改变字体颜色 */
}

.review-text {
  margin-top: 10px; /* 增加顶部间距 */
  font-size: 16px;
  color: #555; /* 改变字体颜色 */
  line-height: 1.5; /* 增加行高，提升可读性 */
}
.review-date {
  text-align: right; /* 使文本靠右对齐 */
  margin-top: 5px; /* 增加顶部间距，确保与 review-text 有一定距离 */
  margin-right: 1px; /* 右侧缩进 */
  font-size: 14px; /* 可选：调整字体大小 */
  color: #888; /* 可选：改变字体颜色 */
}
</style>
